<template>
  <ul class="dl-wrapper">
    <li
      v-for="{ id, text, done } in todos"
      key="id"
      @click="itemClick(id)"
      :class="{done}"
    >
      {{ text }}
    </li>
  </ul>
</template>

<script setup>
import {  } from "vue";
const props = defineProps({
    todos:Array
});
const emit = defineEmits(["transferId"]);
function itemClick(id) {
  emit("transferId", id);
}
</script>

<style lang='scss'>
.dl-wrapper {
  padding: 0px;
  border: 1px solid gray;

  li {
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid gray;

    &.done {
      text-decoration: line-through;
    }

    &:last-child {
      border-bottom: none;
    }
  }
}
</style>